<template>
  <div class="view-container">

    <div class="main-content">
      <div class="list-container">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="未读"
            name="first"
          />
          <el-tab-pane
            label="已读"
            name="second"
          />
        </el-tabs>
        <div class="form-container">
          <table-tools>
            <template #left>
              <el-form
                :inline="true"
                :model="filterData"
                label-position="right"
                label-width="120px"
                size="small"
                class="filter-form-inline"
              >
                <el-form-item
                  label="流程择审批类型"
                  style="margin-top: 18px"
                >
                  <el-select
                    v-model="filterData.productStatus"
                    clearable
                    placeholder="请选流程择审批类型"
                    :fit-input-width="true"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in dictMap?.approval_type"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>

                <el-form-item
                  label="发起人"
                  style="margin-top: 18px"
                >
                  <el-select
                    v-model="filterData.productStatus"
                    clearable
                    :fit-input-width="true"
                    placeholder="请选择发起人"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in dictMap?.product_status"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>
                <el-form-item
                  label="时间范围"
                  style="margin-top: 18px;"
                >
                  <el-date-picker
                    v-model="filterData.date"
                    style="width: 220px;"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="抄送时间"
                    end-placeholder="结束时间"
                  />
                </el-form-item>
                <el-form-item
                  label="关键字"
                  style="margin-top: 18px"
                >
                  <el-input
                    v-model="filterData.keyWord"
                    clearable
                    placeholder="输入流程编号、信息摘要关键字查询"
                  />
                </el-form-item>
                <el-form-item style="margin-top: 18px">
                  <el-button class="border-btn">重置</el-button>
                  <el-button
                    type="primary"
                    class="main-btn danger-btn"
                    @click="listSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-form>
            </template>
            <template #btn>
              <div
                v-if="activeName==='first'"
                style="display: flex; justify-content: flex-end"
              >
                <el-button
                  class="border-danger"
                  size="small"
                >全部已读</el-button>
              </div>
            </template>
          </table-tools>
        </div>
        <table-view
          header-cell-class-name="table-header"
          :data="listData"
          border
          :cell-style="cellStyle"
          @row-click="rowClick"
        >
          <el-table-column
            prop="processNo"
            label="流程编号"
            fixed="left"
            :min-width="100"
            header-align="center"
          />
          <el-table-column
            :min-width="120"
            prop="processDefinitionName"
            label="流程审批类型"
            align="center"
            header-align="center"
          />
          <el-table-column
            :min-width="200"
            prop="abstract"
            label="信息摘要"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="发起人"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <span> 发起人 </span>
            </template>
          </el-table-column>
          <el-table-column
            label="发起时间"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <span> {{ dateFormat('yyyy-mm-dd HH:MM', scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="抄送时间"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <span v-if="scope.row.lastTask?.endTime"> {{ dateFormat('yyyy-mm-dd HH:MM', scope.row.lastTask?.endTime) }}</span>
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="filterData.page"
          v-model:limit="filterData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />
      </div>

    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from 'vue'
import {crmStore} from '@CRM/store'

export default {
  components: {},
  setup(props, context) {
    var reactiveData = reactive({
      activeName: 'first',
      dictMap: crmStore.getters['dictionary/getDictionary'],
      listData: [],
      total: 0,
      filterData: {
        page: 1,
        pageSize: 20,
      },
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column.label, event)
      if (column.label === '操作') return
    }
    const handleClick = (val) => {
      console.log(val)
    }
    return {
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      handleClick,
    }
  },
}
</script>

<style>
</style>
